<template>
  <div>
    <el-input v-model="name" placeholder="请输入广告标题" style="width:300px"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
    <el-input v-model="content" placeholder="请输入广告内容" style="width:300px"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
    <el-button @click="list()" type="primary" size="small">查询</el-button>
    <el-button type="primary" @click="addBean" size="small">添加</el-button>
    <el-button type="primary" icon="el-icon-upload2" @click="dc" size="small">导出数据</el-button>
    <el-table :data="adList" border style="width: 60%">
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column prop="id" label="广告ID" width="130"></el-table-column>
      <el-table-column prop="name" label="广告标题" width="250"></el-table-column>
      <el-table-column prop="content" label="广告内容" width="250"></el-table-column>
      <el-table-column prop="url" label="广告图片" width="170">
        <template slot-scope="scope">
          <img :src="scope.row.url" min-width="100" width="100%" height="70" />
        </template>
      </el-table-column>

      <el-table-column prop="position" :formatter="wz" label="广告位置" width="130"></el-table-column>
      <el-table-column prop="link" label="活动链接" width="150"></el-table-column>
      <el-table-column prop="enabled" :formatter="qd" label="是否启动" width="130"></el-table-column>

      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button @click="upd(scope.row)" type="primary">编辑</el-button>
          <el-button @click="del(scope.row)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <br />
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pages"
      :page-sizes="[1, 5, 10, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <!-- 添加对话框 -->
    <el-dialog title="添加" :visible.sync="addFlag">
      <el-form :model="form">
        <el-form-item label="广告标题" :label-width="formLabelWidth" prop="question">
          <el-input v-model="form.name" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="广告内容" :label-width="formLabelWidth" prop="answer">
          <el-input v-model="form.content" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="广告图片" :label-width="formLabelWidth" prop="answer">
          <el-input v-model="form.url" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="广告位置" :label-width="formLabelWidth" prop="answer">
          <!-- <el-input v-model="form.position" autocomplete="off" style="width:300px"></el-input> -->
          <el-select v-model="form.position" placeholder="请选择">
            <el-option
              v-for="item in positionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动链接" :label-width="formLabelWidth" prop="answer">
          <el-input v-model="form.link" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="是否启动" :label-width="formLabelWidth" prop="answer">
          <!-- <el-input v-model="form.enabled" autocomplete="off" style="width:300px"></el-input> -->
          <el-select v-model="form.enabled" placeholder="请选择">
            <el-option
              v-for="item in enabledList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFlag = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加结束 -->

    <!-- 编辑对话框 -->
    <el-dialog title="编辑" :visible.sync="updFlag">
      <el-form :model="form">
        <el-form-item label="广告标题" :label-width="formLabelWidth" prop="question">
          <el-input v-model="form.name" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="广告内容" :label-width="formLabelWidth" prop="answer">
          <el-input v-model="form.content" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="广告图片" :label-width="formLabelWidth" prop="answer">
          <el-input v-model="form.url" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="广告位置" :label-width="formLabelWidth" prop="answer">
          <!-- <el-input v-model="form.position" autocomplete="off" style="width:300px"></el-input> -->
          <el-select v-model="form.position" placeholder="请选择">
            <el-option
              v-for="item in positionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动链接" :label-width="formLabelWidth" prop="answer">
          <el-input v-model="form.link" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="是否启动" :label-width="formLabelWidth" prop="answer">
          <!-- <el-input v-model="form.enabled" autocomplete="off" style="width:300px"></el-input> -->
          <el-select v-model="form.enabled" placeholder="请选择">
            <el-option
              v-for="item in enabledList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updFlag = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑结束 -->
  </div>
</template>


<script>
var quan;
var data4Vue = {
  adList: [],
  total: 0,
  pages: 1,
  pageSize: 5,
  name: "",
  content: "",
  lookFlag: false,
  formLabelWidth: "120px",
  form: {
    name: "",
    pages: 1,
    pageSize: 10,
    content: ""
  },
  addFlag: false,
  updFlag: false,
  enabledList: [
    {
      value: "0",
      label: "不启用"
    },
    {
      value: "1",
      label: "启用"
    }
  ],
  positionList: [
    {
      value: "1",
      label: "首页"
    }
  ]
};

export default {
  name: "Ad",
  props: {
    msg: String
  },
  data: function() {
    return data4Vue;
  },
  mounted: function() {
    quan = this;
    quan.list(1);
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pages = val;
      this.list();
    },
    list() {
      this.axios({
        method: "get",
        url: "http://localhost:8085/ecAd/adList",
        params: {
          pageNum: this.pages,
          pageSize: this.pageSize,
          name: quan.name,
          content: quan.content
        }
      }).then(function(res) {
        quan.adList = res.data.obj.list;
        quan.total = res.data.obj.total;
        console.log(quan.adList);
      });
    },
    addBean: function() {
      quan.addFlag = true;
      for (var i in quan.form) {
        quan.form[i] = null;
      }
    },
    add: function() {
      this.axios
        .post("http://localhost:8085/ecAd/addAd", quan.form)
        .then(function(res) {
          if (res.data.code == 200) {
            alert("添加成功");
            quan.addFlag = false;
            quan.list();
          } else {
            alert("添加失败");
          }
        });
    },
    del: function(bean) {
      this.axios
        .get("http://localhost:8085/ecAd/delAd?id=" + bean.id)
        .then(function(res) {
          if (res.data.code == 200) {
            alert("删除成功");
            quan.list();
          } else {
            alert("删除失败");
          }
        });
    },
    upd: function(bean) {
      this.axios
        .get("http://localhost:8085/ecAd/getAd?id=" + bean.id)
        .then(function(res) {
          quan.form = res.data.obj;
          quan.updFlag = true;
        });
    },
    update: function() {
      this.axios
        .post("http://localhost:8085/ecAd/updAd", quan.form)
        .then(function(res) {
          if (res.data.code == 200) {
            alert("修改成功");
            quan.updFlag = false;
            quan.list();
          } else {
            alert("修改失败");
          }
        });
    },
    qd: function(bean) {
      if (bean.enabled == 0) {
        return "不启用";
      } else if (bean.enabled == 1) {
        return "启用";
      }
    },
    wz: function(bean) {
      if (bean.position == 1) {
        return "首页";
      }
    },

    dc: function() {
      // "http://localhost:8085/ecCoupon/downLoadCouponExcel?pageNum={pageNum}&pageSize={pageSize}&access_token={token}";
      var url =
        "http://localhost:8085/ecAd/downLoadAdExcel?pageNum={pages}&pageSize={pageSize}";
      url = url.replace("{pages}", quan.form.pages);
      url = url.replace("{pageSize}", quan.form.pageSize);
      if (quan.form.name) {
        url = url + "&name=" + quan.form.name;
      }
      if (quan.form.type) {
        url = url + "&content=" + quan.form.content;
      }

      console.log("url:----------------------", url);
      window.open(url, "_parent");
    }
  }
};
</script>